<template>
  <div class="project-management">
    <h1>园区建设项目管理</h1>

    <!-- 项目列表 -->
    <div class="project-list">
      <!-- 项目卡片 -->
      <div
        v-for="project in paginatedProjects"
        :key="project.id"
        class="project-item clickable"
        @click="openDetailDialog(project.id)"
      >
        <div class="project-header">
          <div class="project-info">
            <h3>{{ project.name }}</h3>
            <span class="date-range">
              {{ project.startDate }} 至 {{ project.endDate }}
            </span>
            <span class="project-manager">负责人：{{ project.manager }}</span>
          </div>
          <div class="project-status">
            <progress-bar :progress="project.progress" />
            <span :class="statusClass(project.status)">
              {{ project.status }} ({{ project.progress }}%)
            </span>
            <button @click.stop="openDetailDialog(project.id)">查看详情</button>
          </div>
        </div>
        <!-- 项目操作按钮: 巡检管理与问题上报 -->
        <!-- 巡检管理按钮 -->
        <el-button
          size="small"
          type="primary"
          @click.stop="openInspectionDialog(project.id)"
        >
          巡检管理
        </el-button>

        <!-- 问题上报按钮 -->
        <el-button
          size="small"
          type="danger"
          @click.stop="openIssueDialog(project.id)"
        >
          问题上报
        </el-button>
      </div>
    </div>
    <!-- 分页 -->
    <el-pagination
      v-model:current-page="currentPage"
      :page-size="pageSize"
      :total="projectStore.projects.length"
      layout="prev, pager, next"
      class="pagination-bottom"
    />
    <!-- 项目详情弹窗 -->
    <project-detail-dialog
      v-model:visible="showDetailDialog"
      :project-id="selectedProjectId"
      :task-id="selectedTaskId"
    >
      <template #footer>
        <el-button @click="showDetailDialog = false">关闭</el-button>
      </template>
    </project-detail-dialog>

    <!-- 巡检任务对话框 -->
    <InspectionTaskDialog
      v-model="showInspectionDialog"
      :project-id="selectedProjectId"
    />

    <!-- 问题上报对话框 -->
    <IssueReportDialog
      v-model="showIssueDialog"
      :project-id="selectedProjectId"
    />
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useProjectStore } from '@/stores/project'
import InspectionTaskDialog from '@/components/InspectionTaskDialog.vue'
import IssueReportDialog from '@/components/IssueReportDialog.vue'
import ProjectDetailSidebar from '@/components/ProjectDetailSidebar.vue'

const projectStore = useProjectStore()
const showDetailDialog = ref(false)
const showInspectionTaskDialog = ref(false)
const showUploadRecordDialog = ref(false)
const showReportIssueDialog = ref(false)
const selectedProjectId = ref(null)
const showInspectionDialog = ref(false)
const showIssueDialog = ref(false)
const selectedTaskId = ref(null)
const currentPage = ref(1)
const pageSize = ref(10)

const inspectionTask = ref({
  name: '',
  projectId: '',
  description: ''
})

const issueReport = ref({
  description: '',
  files: []
})

const fileList = ref([])

const openDetailDialog = (projectId) => {
  selectedProjectId.value = projectId
  showDetailDialog.value = true // 打开项目详情弹窗
}

const closeDetailDialog = () => {
  showDetailDialog.value = false // 关闭项目详情弹窗
}

const openInspectionDialog = (projectId) => {
  console.log('jiej')
  selectedProjectId.value = projectId
  showInspectionDialog.value = true
}

const openIssueDialog = (projectId) => {
  selectedProjectId.value = projectId
  showIssueDialog.value = true
}

const statusClass = (status) => {
  const statusMap = {
    进行中: 'status-active',
    已完成: 'status-completed',
    已延期: 'status-delayed',
    待启动: 'status-pending'
  }
  return statusMap[status] || 'status-unknown'
}

const handlePageChange = (page) => {
  currentPage.value = page
}

const paginatedProjects = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = currentPage.value * pageSize.value
  return projectStore.projects.slice(start, end)
})

// 巡检任务分配
const assignInspectionTask = () => {
  console.log('分配任务:', inspectionTask.value)
  // 这里调用后端接口保存任务分配
  showInspectionTaskDialog.value = false
}

// 文件上传
const handleFileChange = (file) => {
  fileList.value.push(file)
}

const handleUpload = () => {
  console.log('上传文件...', fileList.value)
  // 处理文件上传逻辑
}

const beforeUpload = (file) => {
  const isImage = file.type.startsWith('image/')
  if (!isImage) {
    alert('只能上传图片文件')
    return false
  }
  return true
}

// 问题上报
const handleIssueFileChange = (file) => {
  issueReport.value.files.push(file)
}

const handleIssueUpload = () => {
  console.log('上传问题文件...', issueReport.value.files)
  // 处理问题文件上传
}

const submitIssueReport = () => {
  console.log('提交问题报告:', issueReport.value)
  // 调用后端接口提交问题报告
  showReportIssueDialog.value = false
}
</script>

<style scoped>
.project-management {
  padding: 20px;
}

.project-list {
  display: flex;
}

.project-item {
  width: 40%;
  margin: 20px 1%;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #fff;
  transition: background-color 0.3s;
}

.project-item.clickable {
  cursor: pointer;
}

.project-item.clickable:hover {
  background-color: #f0f7ff;
}

.project-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.project-info h3 {
  font-size: 18px;
  margin: 0;
}

.project-info .date-range {
  color: #999;
  font-size: 14px;
}

.project-manager {
  color: #666;
  font-size: 14px;
}

.project-status {
  text-align: right;
}

.project-status button {
  background-color: #409eff;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.project-status button:hover {
  background-color: #66b1ff;
}

.status-active {
  color: #67c23a; /* 绿色表示进行中 */
}

.status-completed {
  color: #909399; /* 灰色表示已完成 */
}

.status-delayed {
  color: #f56c6c; /* 红色表示延期 */
}

.status-pending {
  color: #e6a23c; /* 橙色表示待启动 */
}

.pagination-bottom {
  margin-top: 20px;
}
</style>
